<?php load_header() ?>
<div class="row">
	<div class="action-tools container-fluid">
		<div class="page-header">Create New Package</div>
	</div>

	<div class="container-fluid text-center action-step-wrapper">
			<div class="col-md-4 action-step first active" id="step1">
				<div class="">Create Package</div>
			</div>
			<div class="col-md-4 action-step" id="step2">
				<div class="">Choosing Services</div>
			</div>
			<div class="col-md-4 action-step last" id="step3">
				<div class="">Summary & Finish</div>
			</div>
	</div>

	<div class="container-fluid">

		<?php echo form_open(PANEL_URL . '/package/create', 'role="form"') ?>
		<div style="max-width:400px" id="formStep1">
			<div class="form-group">
				<label class="control-label">Name <span class='red'>*</span></label>
				<input type="text" name="name" class="form-control">
			</div>
			<div class="form-group">
				<label class="control-label">
					Price (This price can be set when you choose service)
				</label>
				<input type="text" name="price" class="form-control">
			</div>
			<div class="form-group">
				<label class="control-label">
		`			Serve within (Day) <span class="red">*</span>
				</label>
				<input type="text"
					   name='serve_time' class="form-control"
					   placeholder="">
			</div>
			<div class="form-group">
				<label class="control-label">Description</label>
				<textarea name="description"
						  class="form-control"
						  row="3"></textarea>
			</div>
			<div class="form-group">
				<a class="btn btn-primary next-step"
				   data-current-form="#formStep1"
				   data-current-step="#step1"
				   data-next-form="#formStep2"
				   data-next-step="#step2">Next</a>
			</div>
		</div>

		<div class="hidden" id="formStep2">
			<div class="container-fluid">
				<div class="row">
					<div class="col-md-12" id="service-list-option">
						<div class="list-options">
							<h5 class="page-header"
								style="margin-left: -40px; margin-bottom: 10px; font-size: 16px; padding-top: 20px">
								Services
							</h5>
							<ul class="nav">
								<?php foreach ($service_list->result() as $row): ?>
									<li>
										<label class="checkbox">
										<?php
											$check_box_attrs = [
												'name'  => 'service',
												'value' => $row->service_id,
												'class' => 'service-option'
											];
											echo form_checkbox($check_box_attrs);
											echo $row->service_name;
										?>
										<p id="<?php echo $row->service_id?>" class="pull-right" style="padding-right: 20px">
										&nbsp;
										</p>
										</label>
									</li>
								<?php endforeach ?>
							</ul>
						</div>
					</div>
					<div class="col-md-6 hidden" id="supplier-list-options">
						<div class="list-options">
							<h5 class="page-header"
								style="margin-left: -40px; margin-bottom: 10px;font-size: 16px; padding-top: 20px">
								Suppliers
							</h5>
							<ul class="nav" id="supplier_list">

							</ul>
						</div>
					</div>
				</div>
			</div>
			<br>
			<div class="form-group">
				<a class="btn btn-primary next-step disabled"
				   id="step2_next"
				   data-current-form="#formStep2"
				   data-current-step="#step2"
				   data-next-form="#formStep3"
				   data-next-step="#step3">Next</a>
			</div>
		</div>

		<div class="hidden" id="formStep3">
			<div class="panel" style="padding: 30px;">
				<h3>Summary of the package</h3>
			</div>
			<div class="form-group">
				<?php echo form_submit('submit', 'Finish', 'class="btn btn-success disabled"') ?>
				<a href="#" class="btn btn-danger disabled">Back</a>
			</div>
		</div>

		<?php echo form_close(); ?>
	</div>
</div>
<?php load_content_footer(); ?>
<script type="text/javascript">
	$(function() {
		$('.next-step').click(function(e){
			e.preventDefault();

			var current_form = $(this).data('current-form');
			var next_form	 = $(this).data('next-form');
			var current_step = $(this).data('current-step');
			var next_step	 = $(this).data('next-step');

			$(current_form).hide();
			$(next_form).show().removeClass('hidden');
			$(current_step).removeClass('active');
			$(next_step).addClass('active');

		});
	});

	$(function(){
		$('.service-option').change(function() {
			$('#service-list-option').removeClass('col-md-12').addClass('col-md-6');
			$('#supplier-list-options').removeClass('hidden');
			var this_obj = $(this);

			if($(this).is(':checked')) {

				var service_id = $(this).val();
				var service_name = $(this).parent().text();

				$.ajax({
					url: "<?php echo base_url(PANEL_URL . '/package/supplier_list'); ?>",
					type: 'POST',
					data: {service_id: service_id},
				})
				.done(function(r) {
					var html = '';
					if(r.length < 1) {
						html = '<p>No supplier for this service</p>';
						this_obj.prop('checked', false);
					} else {
						$('#step2_next').removeClass('disabled');
					}

					$.each(r, function(index, row) {
						message = '';
						html += '<li>';
						html += '<label class="radio">';
						html += '<input type="radio" class="supplier-option" data-service-id="' +service_id+ '" name="supplier" value="' + row.user_id + '">';
						html += row.firstname;
						html += '</label>';
						html += '</li>';
					});

					$('#supplier_list').html(html);
					$('#supplier-list-options .page-header').text('Supplier for ' + service_name);
				})
				.fail(function() {
					console.log("error");
				})
				.always(function() {
					console.log("complete");
				});

			}

		});
	});

	$(function(){
		$(document).on('change', '.supplier-option', function(){
			var supplier_id = $(this).val();
			var supplier_name = $(this).parent().text();
			var service_id = $(this).data('service-id');

			$('.service-option[value=' + service_id+']').addClass('service-chosen');
			$('#' + service_id).text('by ' + supplier_name);
			$('.service-option').prop('checked', false);
			$('.service-chosen').prop('checked', 'checked');
		});
	});
</script>

<?php load_footer() ?>
